import { lazy, Suspense } from "react";
import { createBrowserRouter, createHashRouter } from "react-router-dom";

import Layout from "../layout";

// https://reactrouter.com/en/main/start/overview

function createLazyComponent(compPath: string, needLayout = false) {
  const Comp = lazy(() => import(compPath));
  if (needLayout) {
    return (
      <Layout>
        <Comp />
      </Layout>
    );
  }
  return <Comp />;
}

export const routes = [
  {
    path: "/",
    element: createLazyComponent("../pages/home", true),
    children: [
      {
        path: "/message",
        element: createLazyComponent("../pages/message"),
        meta: {
          title: "消息",
        },
      },
      {
        path: "/news",
        element: createLazyComponent("../pages/news"),
        meta: {
          title: "新闻",
        },
      },
    ],
    meta: {
      title: "首页",
    },
  },
  {
    path: "/about",
    element: createLazyComponent("../pages/about", true),
    meta: {
      title: "关于",
    },
  },
];

export default createHashRouter(routes);
